<template>
  <div class="box">
    <bannerPhone />
    <div class="fuwu">
      <header>
         <span class="iconfont icon-fanhui" @click="returns()"></span> 
         <span class="iconfont icon-gouwuche"></span>
      </header>
      <p>
        <span class="iconfont icon-duihao"></span>
        官方商城
      </p>
      <p>
        <span class="iconfont icon-duihao"></span>
        售后无忧
      </p>
      <p>
        <span class="iconfont icon-duihao"></span>
        资质证照
      </p>
    </div>
    <h2>
      <i>手机系列</i>
      <span>了解Xiaomi品牌故事</span>
    </h2>
    <div class="img">
      <div class="img1">
        <img src="./img/phone_ (1).jpg" alt="" class="left" />
        <p>
          <img src="./img/phone_ (2).jpg" alt="" class="left" />
          <img src="./img/phone_ (3).jpg" alt="" class="left" />
        </p>
      </div>
      <div class="img2">
        <img src="./img/phone_ (4).jpg" alt="" class="left" />
        <img src="./img/phone_ (5).jpg" alt="" class="left" />
      </div>
      <div class="img3">
        <img src="./img/phone_ (6).jpg" alt="" class="left" />
        <img src="./img/phone_ (7).jpg" alt="" class="left" />
        <img src="./img/phone_ (8).jpg" alt="" class="left" />
      </div>
    </div>
    <h3>
      <i>官方精选</i>
      <span>拿不定主意看这里</span>
    </h3>
    <div class="shopp" v-for="(phone, index) in phone_tuijian" :key="index">
        <img :src="'/imgs/'+phone.img" alt="">
        <p>
            <i>{{phone.name}}</i>
            <b>{{phone.describe}}</b>
            <span>
                ¥<strong>{{phone.price}}</strong>起
            </span>
        </p>
    </div>
  </div>
</template>

<script>
import bannerPhone from "./zinpm/bannerPhone.vue";
import axios from "axios";

export default {
  name: "MobilePhoneCenter",
  components: {
    bannerPhone,
  },
  methods: {
    returns() {
      this.$router.back();
    },
  },
  data() {
    return {
        phone_tuijian: [],
    };
  },
    created() {
      axios({
        url: "/phone_tuijian",
      }).then((res) => {
        this.phone_tuijian = res.data;
        console.log(this.phone_tuijian);
      });
    },
};
</script>

<style scoped>
@import url(../gonggongwenjian/xiaomi-iconfont/iconfont.css);
header{
  height: .45rem;
  width: 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: .12rem;
}
header .icon-fanhui{
  font-size: .24rem;
  color: #a8b1b0;
}
header .icon-gouwuche{
  height: .28rem;
  width: .28rem;
  font-size: .20rem;
  line-height: .28rem;
  text-align: center;
  color: #fff !important;
  font-weight: 700;
  background-color: #777;
  border-radius: 50%;
}
.fuwu {
  height: 0.3rem;
  padding: 0 0.3rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.12rem;
  color: #777777;
  background-color: #f3f4f9;
}
.fuwu .iconfont {
  color: #777777;
}
h2 {
  height: 0.73rem;
  width: 3.5rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h2 i,
h3 i {
  font-size: 0.22rem;
  font-weight: 700;
  letter-spacing: 0.02rem;
}
h2 span,
h3 span {
  font-size: 0.12rem;
  color: #898989;
}
.img {
  height: 5.7rem;
  width: 3.45rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.img .img1 {
  height: 2.84rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.img .img1 p {
  width: 1.14rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.img .img1 p img {
  width: 100%;
  height: 1.41rem;
}
.img .img2,
.img .img3 {
  height: 1.4rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.img .img1 .left {
  height: 100%;
}
.img .img2 img:nth-child(1) {
  height: 100%;
  width: 2.28rem;
}
.img .img3 img {
  height: 100%;
  width: 1.13rem;
}
h3 {
  height: 0.9rem;
  width: 3.5rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.shopp{
    height: 2.54rem;
    width: 3.42rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    margin-bottom: .17rem;
}
.shopp img{
    height: 1.67rem;
    width: 100%;
    border-radius: .06rem;
}
.shopp p{
    height: 0.87rem;
    box-sizing: border-box;
    padding: .1rem .14rem;
    display: flex;
    flex-direction: column;
    /* background-color: pink; */
    justify-content: space-around;
}
.shopp p i{
    font-weight: 700;
}
.shopp p b{
    font-size: .12rem;
    color: #727272;
}
.shopp p span{
     font-size: .12rem;
     color: #ef4747;
}
.shopp p span strong{
       font-size: .18rem;
}
</style>
